import React, { ReactElement, useEffect, useState } from 'react';
import { ScrollView, Text, View } from 'react-native';
import moment from 'moment';

import styles from './style';
import Notch, { NotchType } from '../../components/Notch';
import NavBar from '../../components/NavBar';
import { CoinApi } from '../../api';
import { groupBy, map, pipe, values } from 'ramda';
import { YutouCoinRecord } from '../../api/coin/getYutouCoinHistory';
import Empty from '../../components/Empty';
import { pointToYuan } from '../../util/transformMoney';

export enum YutouCoinChangeReason {
  Unknown,
  Recharge,
  BuyCourse
}

export enum ChangeType {
  Unknown,
  Increase,
  Decrease
}

interface Record {
  year: number;
  date: string;
  time: string;
  changeType: ChangeType;
  coinAmountDetail: string;
  recordDetail: string;
}

interface YearRecord {
  year: number;
  record: Record[];
}

export default (): ReactElement => {
  const [data, setData] = useState<YearRecord[]>([]);

  const getRechargeRecord = (): void => {
    CoinApi.getYutouCoinHistory().then((res): void => {
      if (res.code === 0 && res.data) {
        const { records } = res.data;
        const recordList = pipe(
          map(
            (item: YutouCoinRecord): Record => ({
              year: Number(moment(item.timeStamp).year()),
              date: moment(item.timeStamp).format('MM/DD'),
              time: moment(item.timeStamp).format('HH:mm:ss'),
              changeType: item.changeType,
              coinAmountDetail: `${
                item.changeType === ChangeType.Increase ? '+' : '-'
              }${pointToYuan(item.coinAmount)}`,
              recordDetail:
                item.yutouCoinChangeReason === YutouCoinChangeReason.Recharge
                  ? '蜜蜂币充值'
                  : '购买课程'
            })
          ),
          groupBy((item): any => item.year),
          values,
          map(
            (item): YearRecord => ({
              year: item[0].year,
              record: item
            })
          )
        )(records);
        setData(recordList);
      }
    });
  };

  useEffect((): void => {
    getRechargeRecord();
  }, []);

  return (
    <Notch style={styles.container} type={NotchType.Top}>
      <NavBar title="充值记录" />
      {data && data.length > 0 ? (
        <ScrollView contentContainerStyle={styles.content}>
          {data.map(
            (item): ReactElement => (
              <View style={styles.yearItem}>
                <Text style={styles.year}>{item.year}年</Text>
                {item.record.map(
                  (record): ReactElement => (
                    <View style={styles.item}>
                      <View style={styles.dateContent}>
                        <Text style={styles.date}>{record.date}</Text>
                        <Text style={styles.time}>{record.time}</Text>
                      </View>
                      <View style={styles.line} />
                      <View style={styles.detail}>
                        <Text style={styles.name}>{record.recordDetail}</Text>
                        <Text
                          style={[
                            styles.number,
                            record.changeType === ChangeType.Increase
                              ? {}
                              : styles.decrease
                          ]}
                        >
                          {record.coinAmountDetail}
                        </Text>
                      </View>
                    </View>
                  )
                )}
              </View>
            )
          )}
        </ScrollView>
      ) : (
        <Empty emptyDesc="暂无充值记录" />
      )}
    </Notch>
  );
};
